<template>
	<view class="order-record">
		<view class="header-box">
			<view>订单日期：</view>
			<uni-datetime-picker v-model="range" type="daterange" @change="confirmEvent" />
		</view>
		<view class="time-box">
			<text>订单总数：<text class="num-text">{{total || 0}}</text></text>
			<text>订单总金额：<text class="num-text">￥{{orderAmount || 0}}</text></text>
		</view>
		<view class="time-box">
			<text>实际总收入：<text class="num-text">￥{{inComeNum || 0}}</text></text>
		</view>
		<scroll-view scroll-y class="scroll-box" @scrolltolower="getDataEvent">
			<view class="main">
				<view class="card-box" v-for="(item,index) in listData" :key="index">
					<view class="card-title">订单编号：{{item.orderNumber}}</view>
					<view class="card-text">
						<view>
							<text class="item-title">门店：{{item.shopName}}</text>
							(<text class="item-color">{{item.orderDetail.productName}}</text>)
						</view>
					</view>
					<view class="card-text">
						<text>订单日期：{{item.createTime}}</text>
						<text>订单类型：{{ dealProductType(item.orderDetail.productType)}}</text>
					</view>
					<view class="card-text">
						<view>下单用户：{{item.userMobile}}</view>
						<text>预定类型：{{item.orderDetail.bookingType === '1'?'套餐':'小时'}}</text>
					</view>
					<view class="card-text">
						<view>
							<text>
								支付方式：
								<text v-if="item.payType == 0">余额</text>
								<text v-if="item.payType == 1">微信</text>
								<text v-if="item.payType == 2">支付宝</text>
								<text v-if="item.payType == 3">时间卡</text>
								<text v-if="item.payType == 4">美团抖音兑换券</text>
							</text>
						</view>
						<view>优惠金额：0</view>
					</view>
					<view class="card-text">
						<view>订单金额：{{item.payAmount}}</view>
						<text>实际收入：<text class="item-color">{{item.incomeAmount}}</text></text>
					</view>
				</view>
				<view class="noMore">暂无更多</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productionModel: [],
				range: [],
				listData: [],
				shopId: '',
				startDate: '',
				endDate: '',
				pageSize: 10,
				pageNum: 1,
				total: 0,
				orderAmount: 0,
				inComeNum: 0
			};
		},
		methods: {
			// 选择日期
			confirmEvent(dateArr) {
				this.startDate = dateArr[0]
				this.endDate = dateArr[1]
				this.pageNum = 1
				this.listData = []
				this.getOrderRecord()
			},
			getDataEvent() {
				if (this.listData.length < this.total) {
					this.pageNum++
					this.getOrderRecord()
				}
			},
			// 获取产品类型
			getProductionModel() {
				this.$request({
					method: 'get',
					url: `/applet/store/product/modelList`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.productionModel = res.data || []
					this.getOrderRecord()
				}).catch(err => {
					console.log('查询异常：', err)
				})
			},
			// 处理产品类型
			dealProductType(productType) {
				let type = ''
				this.productionModel.forEach((item, index) => {
					if (item.modelType === productType) {
						type = item.modelName
					}
				})
				return type
			},
			// 获取订单列表
			getOrderRecord() {
				const data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					shopId: this.shopId,
					startDate: this.startDate,
					endDate: this.endDate,
				}
				this.$request({
					method: 'post',
					url: '/applet/store/order/incomeList',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.rows?.length > 0) {
						this.listData = [...this.listData, ...res.rows]
					}
					this.total = res.total
					this.getOrderRecordAmount();
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 获取收入统计
			getOrderRecordAmount() {
				const data = {
					shopId: this.shopId,
					startDate: this.startDate,
					endDate: this.endDate,
				}
				this.$request({
					method: 'post',
					url: '/applet/store/order/incomeListStat',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.orderAmount = res.data.totalAmount
					this.inComeNum = res.data.incomeAmount
				}).catch(err => {
					console.log('请求异常：', err)
				})
			}
		},
		onLoad(option) {
			this.shopId = option.shopId;
			this.getProductionModel()
		}
	}
</script>

<style lang="scss" scoped>
	.order-record {

		.header-box {
			background-color: #FFF;
			display: flex;
			padding: 10rpx 20rpx;
			align-items: center;
			font-size: 28rpx;
		}

		.time-box {
			font-weight: 600;
			background: #FFF;
			padding: 20rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.num-text {
				color: #ff9600;
			}
		}

		.item-title {
			font-weight: bold;
			color: #000;
		}

		.item-color {
			font-weight: bold;
			color: #ff9600;
		}

		.scroll-box {
			height: calc(100vh - 248rpx);
		}

		.main {
			padding: 20rpx;
			background: #FFF;
		}

		.card-box {
			background: #FFF;
			border: 1px solid #EEE;
			border-radius: 20rpx;
			padding: 20rpx;
			box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;
		}

		.card-title {
			font-weight: bold;
			font-size: 30rpx;
		}

		.card-text {
			color: #333;
			font-size: 28rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.noMore {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}
	}
</style>